<template>
  <el-row :gutter="40">

    <el-col :span="4">
      <el-link disabled>应用列表</el-link>
      <el-table :data="apps" style="width: 100%" :show-header="false" @row-click="getAppResources" class="pointer">
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>
      </el-table>

    </el-col>

    <el-col :span="18">
      <el-link disabled>资源树</el-link>
      <el-tree
        :data="resourcesTree"
        :props="resourcesTreeProps"
        :default-expand-all="true">
        <span class="custom-tree-node" slot-scope="{ node, data }">
           <el-tooltip class="item" effect="dark"
                       :content="data.id+'--'+data.parentId+'--'+data.name+'--'+data.code+'--'+data.locator"
                       placement="right">
              <span
                @click="resourceVisible=true;resourceModel={id:data.id,name:data.name,appId:data.applicationId,parentId:data.parentId,code:data.code,locator:data.locator,msg:data.msg,actionFlag:data.actionFlag}"><i
                class="el-icon-s-tools" v-if="data.actionFlag">--></i>{{ data.name }}</span>
           </el-tooltip>
          &nbsp;&nbsp;
        <span>
           <el-link type="primary" v-if="!data.actionFlag"
                    @click="resourceVisible=true;resourceModel={appId:data.applicationId,parentId:data.id,actionFlag:false}"><i
             class="el-icon-circle-plus"></i></el-link>

           <el-link type="danger" @click="deleteResource(data)"><i class="el-icon-delete"></i></el-link>
        </span>
      </span>
      </el-tree>

      <el-dialog title="添加资源" :visible.sync="resourceVisible">
        <el-form :model="resourceModel">
          <el-form-item label="应用ID">
            <el-input v-model="resourceModel.appId" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="资源名称">
            <el-input v-model="resourceModel.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="权限标识符-前段">
            <el-input v-model="resourceModel.code" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="资源定位符-后端（','分隔）">
            <el-input type="textarea" v-model="resourceModel.locator" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="操作标记">
            <el-switch
              v-model="resourceModel.actionFlag"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resourceVisible = false;resourceModel={}">取 消</el-button>
          <el-button type="primary" @click="addResources">确 定</el-button>
        </div>
      </el-dialog>

    </el-col>


  </el-row>


</template>
<script>


  export default {
    name: "Resource",
    mounted() {
      this.getApps();
    },
    data() {
      return {
        apps: [],
        resourcesTreeProps: {
          label: 'name',
          children: 'ssoResourceTreeViews'
        },
        resourcesTree: [],
        resourceVisible: false,
        resourceModel: {}
      }
    },
    methods: {
      getApps() {
        this.$http.get("/back/apps").then((data) => {
          this.apps = data;
        }).catch(error => {
          console.error(error)
        });
      },

      getAppResources(app) {
        this.$http.get("/back/resources?appId=" + app.id).then((data) => {
          if (data == null || data.length == 0) {
            data = [];
          }
          data.push({name: "添加根权限", id: 0, applicationId: app.id});
          this.resourcesTree = data;
        }).catch(error => {
          console.error(error)
        });
      },
      addResources() {
        this.$http.post("/back/resource", this.resourceModel).then((data) => {
          if (data == null || data.length == 0) {
            data = [];
          }
          data.push({name: "添加根权限", id: 0, applicationId: this.resourceModel.appId});
          this.resourcesTree = data;
          this.resourceVisible = false;
        }).catch(error => {
          this.$message.error("添加资源异常！")
        });
      },
      deleteResource(resource) {
        this.$http.delete("/back/delResource?app=" + resource.applicationId + "&resourcesId=" + resource.id).then((data) => {
          if (data == null || data.length == 0) {
            data = [];
          }
          data.push({name: "添加根权限", id: 0, applicationId: resource.applicationId});
          this.resourcesTree = data;
        }).catch(error => {
          this.$message.error("删除资源异常！")
        });
      }
    },
  }
</script>

<style>
  .pointer {
    cursor: pointer;
  }
</style>
